import { Component, ViewChild, ElementRef, OnInit, AfterViewInit } from '@angular/core';
import { Web, Registerer } from "sip.js";

interface Keypad {
  title: string;
  disabled: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  title = 'view';

  @ViewChild('remoteAudio', {
    static: true
  })
  remoteAudio: ElementRef<HTMLVideoElement>;

  server: string = `ws://localhost:3000`;

  callDisabled: boolean = true;
  hangupDisabled: boolean = true;

  dtmf: string = ``;

  hold = {
    disabled: true,
    checked: false
  }

  mute = {
    disabled: true,
    checked: false
  }

  connectDisabled: boolean = false;
  disconnectDisabled: boolean = true;

  target: string = "sip:echo@sipjs.onsip.com"
  source: string = "sip:alias@sipjs.onsip.com";

  keypad: Keypad[][] = [
    [{ title: '1', disabled: true }, { title: '2', disabled: true }, { title: '3', disabled: true }],
    [{ title: '4', disabled: true }, { title: '5', disabled: true }, { title: '6', disabled: true }],
    [{ title: '7', disabled: true }, { title: '8', disabled: true }, { title: '9', disabled: true }],
    [{ title: '*', disabled: true }, { title: '0', disabled: true }, { title: '#', disabled: true }]
  ];

  keypadDisabled(disabled: boolean) {
    this.keypad.forEach((button) => {
      button.forEach(btn => btn.disabled = disabled)
    });
    this.dtmf = "";
  }

  holdCheckboxDisabled(disabled: boolean) {
    this.hold.checked = true;
    this.hold.disabled = disabled
  }

  muteCheckboxDisabled(disabled: boolean) {
    this.mute.checked = false;
    this.mute.disabled = disabled;
  }

  user: Web.SimpleUser;
  ngAfterViewInit() {
    const displayName = "SIP.js Demo";
    const simpleUserDelegate: Web.SimpleUserDelegate = {
      onCallCreated: (): void => {
        console.log(`[${displayName}] Call created`);
        this.callDisabled = true;
        this.hangupDisabled = false;
        this.keypadDisabled(true);
        this.holdCheckboxDisabled(true);
        this.muteCheckboxDisabled(true);
      },
      onCallAnswered: (): void => {
        console.log(`[${displayName}] Call answered`);
        this.keypadDisabled(false);
        this.holdCheckboxDisabled(false);
        this.muteCheckboxDisabled(false);
      },
      onCallHangup: (): void => {
        console.log(`[${displayName}] Call hangup`);
        this.callDisabled = false;
        this.hangupDisabled = true;
        this.keypadDisabled(true);
        this.holdCheckboxDisabled(true);
        this.muteCheckboxDisabled(true);
      },
      onCallHold: (held: boolean): void => {
        console.log(`[${displayName}] Call hold ${held}`);
        this.hold.checked = held;
      }
    };
    const simpleUserOptions: Web.SimpleUserOptions = {
      delegate: simpleUserDelegate,
      aor: this.source,
      media: {
        remote: {
          audio: this.remoteAudio.nativeElement
        }
      },
      userAgentOptions: {
        displayName
      }
    };
    this.user = new Web.SimpleUser(this.server, simpleUserOptions);
  }
  register() {
    this.user.register()
  }
  /**
   * 链接
   */
  connect() {
    this.connectDisabled = true;
    this.disconnectDisabled = true;
    this.callDisabled = true;
    this.hangupDisabled = true;
    this.user.connect().then(() => {
      this.connectDisabled = true;
      this.disconnectDisabled = false;
      this.callDisabled = false;
      this.hangupDisabled = true;
    }).catch((error: Error) => {
      console.error(`[${this.user.id}] failed to disconnect`);
      console.error(error);
      alert("Failed to disconnect.\n" + error);
    })
  }
  call() {
    this.callDisabled = true;
    this.hangupDisabled = false;
    this.user.call(this.target).catch(error => {
      console.error(`[${this.user.id}] failed to place call`);
      console.error(error);
      alert("Failed to place call.\n" + error);
    })
  }

  hangup() {
    this.callDisabled = true;
    this.hangupDisabled = true;
    this.user.hangup().catch(error => {
      console.error(`[${this.user.id}] failed to hangup call`);
      console.error(error);
      alert("Failed to hangup call.\n" + error);
    })
  }

  disconnect() {
    this.connectDisabled = true;
    this.disconnectDisabled = true;
    this.callDisabled = true;
    this.hangupDisabled = true;
    this.user.disconnect().then(() => {
      this.connectDisabled = false;
      this.disconnectDisabled = true;
      this.callDisabled = true;
      this.hangupDisabled = true;
    }).catch(error => {
      console.error(`[${this.user.id}] failed to disconnect`);
      console.error(error);
      alert("Failed to disconnect.\n" + error);
    })
  }
}
